<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>Faeple / 가입하기</title>

    <link href="/resources/css/bootstrap.css?20141022" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/global-style.css?20141022">
    <link rel="stylesheet" href="/resources/iCheck/skins/square/blue.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <style type="text/css">
    	body{
    		background-image: url("/resources/img/signup_background.jpg");
    		color: #414D55!important;
    	}
    	.guideForm{
    		background-color: #fff;
    		max-width: 740px;
    		margin: 35px auto;
    		padding: 25px;
    		border-radius: 30px;
    		-webkit-transition: all 0.4s;
	    	-moz-transition: all 0.4s;
	    	-o-transition: all 0.4s;
	    	transition: all 0.4s;
    	}
    	.welcome-txt{
    		color: #88A5C3;
    		font-size: 30px;
    	}
    	.radio-inline{ padding-left: 0!important; }
    	.form-control{
    		background-color: transparent;
    		color: #fff;
    	}
    	.form-control:focus {
  			border-color: #426CF2;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		}
		.profile-image{
    		width: 180px;
    		height: 180px;
    		border-radius: 11px;
    		border: 6px solid #fff;
    		background-color: #fff;
    		box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
    		margin: 35px auto 10px auto;
    	}
    	#upLoadProfileImage{
			position: absolute;
			top: 0;
			right: 0;
			margin: 0;
			opacity: 0;
			-ms-filter: 'alpha(opacity=0)';
			direction: ltr;
			cursor: pointer;
			width: 192px;
			height: 34px;
			font-size: 1000px;
			z-index: 2;
		}
		#movie-upLoadProfileImage{
			position: absolute;
			top: 0;
			cursor: move;
			z-index: 5;
		}
		
		#recommendUser{
			width: 100%;
			overflow: auto;
		}
		
		.recmd-profile{
			width: 250px;
			height: 266px;
			background-color: #fff;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);
			-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);
			box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);
			margin-bottom: 20px;
			overflow: hidden;
		}
		.recmd-profile{
			position: relative;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			margin-top: 10px;
		}
		.recmd-profile > .recmd-profile-header{
			padding: 8px;
		}
		.recmd-profile > .recmd-profile-header img{
			width: 45px;
			height: 45px;
			border-radius: 50%;
			float: left;
		}
		.recmd-profile > .recmd-profile-header div{
			float: left;
			margin-left: 8px;
		}
		.recmd-profile > .recmd-profile-header p{
			margin-bottom: 2px;
			font-size: 17px;
			font-weight: bold;
			color: #333333;
		}
		.recmd-profile > .recmd-profile-header span{
			display: block;
			text-align: left;
			color: #808080;
		}
		.recmd-profile > .recmd-profile-images{
			width: 100%;
			padding: 8px;
			float: none;
			clear: both;
			overflow: auto;
		}
		.recmd-profile > .recmd-profile-images > div{
			width: 33%;
			height: 75px;
			float: left;
			overflow: hidden;
			padding: 2px;
		}
		.recmd-profile > .recmd-profile-images > div > img{
			width: 100%;
			height: 100%;
		}
		.recmd-profile > .recmd-profile-images > div > img:hover{
			-ms-filter: 'alpha(opacity=60)';
			opacity: .6;
		}
		.recmd-profile > .recmd-profile-bottom{
			padding-left: 8px;
			padding-right: 8px;
		}
		
		@media all and (max-width: 767px){
			.guideForm{
	    		width: 100%;
	    		border-radius: 8px;
	    		margin-top: 20px;
	    		padding: 15px;
    		}
    		#inputId{
    			width: 97%!important;
    		}
    		.welcome-txt{ font-size: 23px; }
		}
    </style>
	</head>
<body>
<div id="viewport">
<div id="page">
	<form id="update-form" method="post" enctype="multipart/form-data" action="/appMemberRegistComplete">
   	<div class="container">
	   	<div class="guideForm">
	   		<div id="step1">
		   		<p class="welcome-txt">${userDto.name}님 Faeple에 오신것을 환영합니다!</p><br>
		   		<h4>먼저 Faeple에서 사용할 아이디를 입력해주세요</h4>
		   		<ul style="padding-left: 22px;margin-top:14px;">	
		   			<li><p>입력한 아이디는 회원님의 프로필 주소로 지정됩니다.</p></li>
		   			<li><p>아이디는 언제든지 바꿀수 있습니다!</p></li>
		   		</ul>
		   		<br>
		   		<div class="form-group">
		  			<label for="inputId">아이디</label>
		  			<div class="input-group">
		  				<span class="input-group-addon">faeple.com/</span>
		  				<c:choose>
							<c:when test="${userDto.loginApp eq 'twitter'}"><input type="text" class="form-control" id="inputId" name="inputId" placeholder="아이디" value="${twitter_session.id}" onblur="checkValidate(this.id);" onkeyup="checkId(this.value);" maxlength="16" data-toggle="tooltip" title="영문과 숫자만, 16글자이내"  data-toggle="tooltip" style="ime-mode:disabled; width: 180px; background-color: #fff; color: black;"></c:when>
							<c:when test="${userDto.loginApp eq 'instagram'}"><input type="text" class="form-control" id="inputId" name="inputId" placeholder="아이디" value="${instagram_id}" onblur="checkValidate(this.id);" onkeyup="checkId(this.value);" maxlength="16" data-toggle="tooltip" title="영문과 숫자만, 16글자이내" data-toggle="tooltip" style="ime-mode:disabled; width: 180px; background-color: #fff; color: black;"></c:when>
							<c:otherwise><input type="text" class="form-control" id="inputId" name="inputId" placeholder="아이디" onblur="checkValidate(this.id);" onkeyup="checkId(this.value);" maxlength="16" data-toggle="tooltip" title="영문과 숫자만, 16글자이내" style="ime-mode:disabled; width: 180px; background-color: #fff; color: black;" data-toggle="tooltip"></c:otherwise>
						</c:choose>
					</div>
					<div id="idState" style="margin-top: 7px;"></div>
				</div>
				<c:if test="${userDto.loginApp ne 'fb'}">
					<div class="form-group" style="margin-top:30px;">
						<p><strong>성별을 선택해주세요</strong></p>
						<div class="radio-inline">
							<label title="여성"><input type="radio" name="optionsGender" id="optionsGender" value="female" tabindex="5"><span style="margin-left: 6px;">여성</span></label>
						</div>
		    			<div class="radio-inline">
		    				<label title="남성"><input type="radio" name="optionsGender" id="optionsGender" value="male" tabindex="4"><span style="margin-left: 6px;">남성</span></label>
						</div>
					</div>
				</c:if>
				<br>
				<div style="text-align: center;"><button id="save" type="button" class="btn btn-info btn-lg" onclick="next('step1');" title="다음단계로" tabindex="6" style="outline: 0;" disabled="disabled">다음단계로</button></div>
			</div>
			<div id="step2" style="display: none;">
				<h4 class="text-shadow">프로필 사진을 올려보세요</h4>
				<ul style="padding-left: 22px;">	
		   			<li><p>프로필사진 추가 버튼을 클릭해 이미지를 업로드 합니다</p></li>
		   			<li><p>이미지의 위치를 마우스를 이용해 조절합니다</p></li>
		   		</ul>
		   		<br>
				<div class="profile-image">
					<div style="width: 100%; height: 100%; overflow: hidden; display: block; position: relative;">
						<c:if test="${userDto.loginApp eq 'fb'}">
							<img id="profileImage" src="https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999" alt="프로필사진" style="width: 180px; height: auto; border-radius: 7px;">
						</c:if>
						<c:if test="${userDto.loginApp eq 'kakao'}">
							<img id="profileImage" src="${kakao_profileImage}" alt="프로필사진" style="width: 100%; height: 100%; border-radius: 7px;">
						</c:if>
						<c:if test="${userDto.loginApp eq 'twitter'}">
							<img id="profileImage" src="${twitter_session.profileImage}" alt="프로필사진" style="width: 100%; height: 100%; border-radius: 7px;">
						</c:if>
						<c:if test="${userDto.loginApp eq 'instagram'}">
							<img id="profileImage" src="${instagram_profile}" alt="프로필사진" style="width: 100%; height: 100%; border-radius: 7px;">
						</c:if>
							<img style="width: 100%; height: auto;" id="movie-upLoadProfileImage" src="">
					</div>
				</div>
				<div style="text-align: center; width: 100%;">
					<span class="btn btn-success" style="width: 180px; height: 34px; margin:5px auto; position: relative; cursor: pointer; overflow: hidden;">
						<input type="file" id="upLoadProfileImage" name="upLoadProfileImage" onchange="profileImageUpload(this)" accept="image/*">
						<input type="hidden" id="inputprofileImage_top" name="inputprofileImage_top" value="0">
						<input type="hidden" id="fb_profileImage" name="fb_profileImage" value="none">
						<input type="hidden" id="insta_profileImage" name="insta_profileImage" value="none">
						<input type="hidden" id="kakao_profileImage" name="kakao_profileImage" value="none">
						<i class="fa fa-camera"></i>
						<span>&nbsp;프로필사진 추가</span>
					</span>
				</div>
				<br><br>
				<div style="text-align: center;"><button type="button" class="btn btn-info btn-lg" onclick="next('step2');" title="다음단계로" style="outline: 0;">다음단계로</button></div>
			</div>
			<div id="step3" style="display: none;padding:40px 0;">
				<p class="welcome-txt" style="text-align:center;">설정이 완료되었습니다</p><br>
				<p style="text-align:center;font-size:18px;margin-bottom:35px;">아래 시작하기 버튼을 눌러 패플을 시작합니다..</p>
				<div style="text-align: center;"><button type="submit" class="btn btn-info btn-lg" id="completeBtn" title="시작하기" style="outline: 0;">시작하기</button></div>
				<div class="progress progress-striped active" id="progressBar" style="display: none; height: 45px;">
					<div class="progress-bar progress-bar-info" role="progressbar" aria-valuemax="100" style="width: 0%"></div>
				</div>
			</div>
			<!-- <div id="step3" style="display: none;">
				<h4 class="text-shadow">흥미로운 사용자를 팔로우 해보세요!</h4>
				<ul>	
		   			<li><p>3명의 사용자를 팔로우 해보세요</p></li>
		   		</ul>
		   		<br>
				<div id="recommendUser"><h5 style="text-align: left; font-weight: bold;" class="text-shadow">추천사용자</h5><div style="width: 100%;height: 2px;background-color: #afafaf;border-bottom: 1px solid #f1f1f1;"></div></div>
				<br><br>
				<div style="text-align: center;"><button type="submit" class="btn btn-info btn-lg" title="완료하기" style="outline: 0;">완료하기</button></div>
			</div> -->
		</div>
	</div>
	</form>
	<div style="margin: 20px auto; text-align: center; width: 100%;">
		<ol class="carousel-indicators" style="margin:0; position: static; width: 100%;">
			<li id="step1_on" class="active"></li>
			<li id="step2_on" class=""></li>
			<li id="step3_on" class=""></li>
		</ol>
	</div>
</div>
</div>
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
	<script src="/resources/js/bootstrap.js"></script>
	<script src="/resources/js/kakao.min.js"></script>
	<script src="/resources/js/jquery.autosize.min.js"></script>
	<script src="/resources/js/nprogress.js"></script>
	<script src="/resources/js/jquery.form.js"></script>
	<script src="/resources/js/icheck.min.js"></script>
	<script type="text/javascript">
		var check1 = false;
		
		$(function(){
			if($("#inputId").val() != ""){
				checkId($("#inputId").val());
			}
			
			$('[data-toggle="tooltip"]').tooltip({
	    		'placement': 'top',
	    		'container': 'body',
	    		'trigger': "hover"
	    	});
			
			$("#profileImage").load(function(){
				if($(this).height() < 180){
					$(this).css("height", 180);
				}
			});
			$("#movie-upLoadProfileImage").draggable({
	    		scroll: false,
	    		axis : "y",
	    		drag : function(event, ui){
	    			var h = $("#movie-upLoadProfileImage").height();
	    			if(ui.position.top >= 0){
	    				ui.position.top = 0;
	    			}else if(ui.position.top <= 180 - h){
	    				ui.position.top = 180 - h;
	    			}
	    		},
	    		stop : function(){
	    			$("#inputprofileImage_top").val($("#movie-upLoadProfileImage").position().top);
	    		}
	    	});
			
			if("${kakao_profileImage}" != "/resources/img/default_profile_pic.png"){
				$("#kakao_profileImage").val("${kakao_profileImage}");
				$("#movie-upLoadProfileImage").attr("src", "${kakao_profileImage}");
				$("#profileImage").hide();
			}
			if("${instagram_profile}" != "/resources/img/default_profile_pic.png"){
				$("#insta_profileImage").val("${instagram_profile}");
				$("#movie-upLoadProfileImage").attr("src", "${instagram_profile}");
				$("#profileImage").hide();
			}
			
			var bar = $(".progress-bar");
			$("#update-form").ajaxForm({
				statusCode: { 
					400: function() {
						alertShow("danger","오류가 발생하였습니다", 2000);
						$("#completeBtn").show();
					},
					500: function() {
						alertShow("danger","오류가 발생하였습니다", 2000);
						$("#completeBtn").show();
					}
				},
				beforeSend: function() {
					$("#completeBtn").hide();
					var percentVal = '0%';
					bar.width(percentVal);
					$("#progressBar").show();
				},
				uploadProgress: function(event, position, total, percentComplete) {
					var percentVal = percentComplete + '%';
					bar.width(percentVal);
			    },
				success: function(data) {
					var percentVal = '100%';
					bar.width(percentVal);
					if(data == "execute"){
						location.href= "/"+$("#inputId").val();
					}else{
						alert("오류가 발생했습니다.\n처음부터 다시 시도해주세요");
    					document.location.reload();
					}
				},
				complete: function(xhr){
					$("#completeBtn").show();
					$("#progressBar").hide();
				}
			});
			$("input").iCheck({
				checkboxClass: 'icheckbox_square-blue',
				radioClass: 'iradio_square-blue'
			});
		});//end ready
		
		function checkValidate(id){
			
			var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
			if($("#inputId").val() == ""){
				$("#idState").html(errorCss+"&nbsp;아이디를 입력해 주세요</span>");
				$("#inputId").parent().addClass("input-group has-error");
			}
		}
		
		function checkId(id){
			if(id.length <= 3){
				$("#idState").html("아이디를 4글자 이상으로 해주세요");
				check1 = false;
				$("#save").attr("disabled", "disabled");
			}else{
				var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
				var successCss = "<span style='color:#435743;'><i class='glyphicon glyphicon-ok'></i>";
				var data = "id="+id;
				$.ajax({
				    type : "get"
				    , url : "/checkId"
				    , data : data
				    , dataType : "text"
				    , timeout : 5000
				    , error : function(request, status, error) {
				    	
				    }
				    , success : function(response) {
				    	if(response == "true"){
				    		$("#idState").html(successCss+"&nbsp;좋습니다</span>");
				    		$("#inputId").parent().removeClass().addClass("input-group has-success");
				    		check1 = true;
				    		$("#save").removeAttr("disabled");
				    	}else{
				    		$("#idState").html(errorCss+"&nbsp;사용중인 아이디입니다</span>");
				    		$("#inputId").parent().removeClass().addClass("input-group has-error");
				    		check1 = false;
				    		$("#save").attr("disabled", "disabled");
				    	}
				    }
				    , beforeSend: function() {
				    	$("#idState").html("<img src='/resources/img/default-btn-loading.gif'>");
				    }
				});
			}
		}
		function next(step){
			if(step == "step1"){
				if("${userDto.loginApp}" != "fb"){
					if(!$("input[name='optionsGender']").is(":checked")){
						alertShow("danger","성별을 선택해 주세요", 2000);
						return false;
					}
				}
				var kor = /[\ㄱ-ㅎㅏ-ㅣ가-힣|\.|\/]/g;
				if(kor.test($("#inputId").val())){
					alertShow("danger","아이디는 영문과 숫자만 가능합니다", 2000);
					return false;
				}
				$("#step1").hide('slide',{'direction':'left'},500,function(){
					$("#step2").fadeIn();
					$("#step1_on").removeClass()
					.next().addClass("active");
				});
			}else if(step == "step2"){
				$("#step2").hide('slide',{'direction':'left'},500,function(){
					$("#step3").fadeIn();
					$("#step2_on").removeClass()
					.next().addClass("active");
				});
			}
			
		}
		
		function profileImageUpload(input){
	  		var fileList = input.files;
	  		try{
          		var anyWindow = window.URL || window.webkitURL;
          		var objectUrl = anyWindow.createObjectURL(fileList[0]);
          		$("#movie-upLoadProfileImage").attr("src", objectUrl)
        		.load(function(){
        			if($(this).height() < 180){
        				$(this).css("height", 180);
        			}
        		});
	  		}catch(e){
	  			alertShow("danger","현재 이용중인 브라우저에서는 이미지 업로드가 불가능합니다", 5000);
	  		}
	        
	  	}
		
		function getRecommendUser(){
    		$.ajax({
                url: "/getRecommendUser",
                dataType: "json",
                timeout: 5000,
                error: function () {
					
                },
                success: function (response) {
                	for(var i=0;i<response.length;i++){
                		//var html = "<div class='recmd-profile'><div class='recmd-profile-header'><img src='/profileImageViewer/"+response[i].idx+"'><p>"+response[i].name+"<br><span>"+response[i].id+"</span></p></div>";
                		var html ="<div class='recmd-profile'><div class='recmd-profile-header'><img src='/profileImageViewer/"+response[i].idx+"'><div><p>"+response[i].name+"</p><span>"+response[i].id+"</span></div></div>";
                		html +="<div class='recmd-profile-images'><div><img src='/postImageViewer/thumbnail_"+response[i].image1+"'></div><div><img src='/postImageViewer/thumbnail_"+response[i].image2+"'></div><div><img src='/postImageViewer/thumbnail_"+response[i].image3+"'></div><div><img src='/postImageViewer/thumbnail_"+response[i].image4+"'></div><div><img src='/postImageViewer/thumbnail_"+response[i].image5+"'></div><div><img src='/postImageViewer/thumbnail_"+response[i].image6+"'></div></div><div class='clear'></div>";
                		html +="<div class='recmd-profile-bottom'><button type='button' class='btn btn-default btn-block' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
                		$("#recommendUser").append(html);
                	}
                }
            });
    	}
		
		function alertShow(type, message, dealy){
			var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button>"+message+"</div>");
			$("body").append($el);
			if(dealy != null){
				setTimeout(function(){$el.addClass("in");},100);
				setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
			}else{
				setTimeout(function(){$el.addClass("in");},100);
			}
		}
		function alertHide(el){
			var $el = $(el).parent();
			$el.removeClass("in");
			setTimeout(function(){$el.remove();},300);
		}
		
	 	/* 페이스북 SDK 초기화 */ 
		window.fbAsyncInit = function() {
			FB.init({appId: '1427921877464450', status: true, cookie: true,xfbml: true});
			if("${userDto.loginApp}" == "fb"){
				FB.api(
					"/${userDto.appIdx}/picture?width=9999&height=9999&redirect=false",
					function (response) {
						if (response && !response.error) {
							if(!response.data.is_silhouette){
								$("#movie-upLoadProfileImage").attr("src", response.data.url);
			                	$("#fb_profileImage").val(response.data.url);
			                	$("#profileImage").hide();
							}
	                	}
				    }
				);
			}
	    };
	    
		(function(d){
		     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
		     if (d.getElementById(id)) return;
		     js = d.createElement('script'); js.id = id; js.async = true;
		     js.src = "//connect.facebook.net/ko_KR/all.js";
		     ref.parentNode.insertBefore(js, ref);
		 }(document));
		
	</script>
</body>
</html>